<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/all.css">
    <!-- 小图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .container {
            display: flex;
            padding: 20px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            transition: transform 0.5s;
            max-width: 1630px;
            max-height: 650px;
        }

        .left-sidebar,
        .main-content {
            padding: 20px;
            margin: 10px;
            /* 阴影 */
            box-shadow: 5px 5px 4px rgb(255, 98, 0);
        }

        .left-sidebar {
            width: 200px;
            height: 100%;
            overflow: hidden;
            flex: 1;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            transition: transform 0.5s;

        }

        /* 偏转 */
        .left-sidebar:hover {
            transform: rotateX(10deg) rotateY(-10deg);
        }

        /* flex值为在flex容器中所占的空间大小，值越大，空间越大 */
        .main-content {
            margin-right: 40px;
            flex: 3;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            transition: transform 0.5s;
            ;
        }

        .tx {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #touxiang {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            transition-duration: 1s;
        }

        #touxiang:hover {
            border-radius: 40%;
            width: 160px;
            height: 160px;
        }

        .msgbox {
            overflow: scroll;
            max-height: 400px;
            /* 可设置最大高度 */
            overflow-y: auto;
        }

        .msg {
            margin: 5px;
            border: solid 1px orange;
            background-color: rgba(0, 0, 0, 0.3);
            transition-duration: 0.5s;
        }

        .msg:hover {
            font-size: larger;
            color: orange;
        }

        .msg::after {
            color: blue;
        }

        div.msgManegeSon {
            display: flex;
            flex: 1;
            margin: 10px;
            height: 150px;
            border: solid 1px orange;
        }

        span {
            display: flex;
            margin: auto;
            font-size: 2em;
            transition: 1s;
        }

        span:hover {
            font-size: 2.5em;
            color: red;
        }

        .msg-content {
            display: flex;
            /* border: solid 1px orange; */
            height: fit-content;
            padding: 20px;
            margin: 10px;
            flex-direction: column;

        }

        .msg-author,
        .msg-message {
            display: flex;
            border: solid 1px orange;
            margin: 10px;
            padding: 10px;
            text-align: center;
            font-size: larger;
        }

        .msg-message {
            height: 200px;
            font-size: 1.5em;
            text-align: center;
            justify-content: center;
            align-items: center;
        }
    </style>

</head>

<body>
    <header>
        <h1>无林楚月的个人博客</h1>
        <nav>
            <ul>
                <li><a href="./home.html">主页</a></li>
                <li><a href="./works.html">作品集</a></li>
                <li><a href="./message.html">留言</a></li>
                <li><a href="./webmap.html">网站地图</a></li>
                <li class="dropdown">
                    <!-- 小三角 -->
                    <a href="javascript:void(0)" class="dropbtn">更多 <i class="fas fa-caret-down"></i></a>
                    <!-- 下拉菜单 -->
                    <div class="dropdown-content">
                        <a href="./aboutme.html">关于我</a>
                        <a href="./contant.html">联系方式</a>
                    </div>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="container">
            <div class="left-sidebar">
                <div class="tx">
                    <img src="../img/头像.jpg" alt="dss头像" id="touxiang">
                </div>
                <br>
                <br>
                <br>
                <br>
                <div id="msgbox" class="msgbox" style="text-align: center;">
                    <!-- <div class="msg">姓名：... 留言：...</div>
                    <div class="msg">姓名：... 留言：...</div>
                    <div class="msg">姓名：... 留言：...</div> -->
                </div>
            </div>

            <div class="main-content">
                <div class="msgManege"
                    style="display: flex; width: 100%; height: 30%; background-color: rgba(0, 0, 0, 0.3); margin: 10px;">
                    <div class="edit msgManegeSon">
                        <span class="favourite" id="favourite">点赞</span>
                    </div>

                </div>
                <div class="msg-content">
                    <div class="msg-author" id="msg_author"></div>
                    <div class="msg-message" id="msg_message"></div>
                </div>


            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 欢迎访问，合作请联系3053624046@qq.com,谢谢</p>
        <div class="social-icons">
            <a href="https://twitter.com/" class="social-icon"><i class="fab fa-twitter"></i></a>
            <a href="https://www.facebook.com/" class="social-icon"><i class="fab fa-facebook"></i></a>
            <a href="https://www.instagram.com/" class="social-icon"><i class="fab fa-instagram"></i></a>
        </div>
    </footer>

    <script src="../JS/all.js"></script>

    <script>
        const IP = '127.0.0.1'
        // 在页面加载之前先调用 onLoad 函数去向后端获取数据
        async function onLoad() {
            try {
                const response = await fetch(`http://${IP}:5362/getmsg`)
                // 处理后端返回的数据格式
                const result = await response.json();
                const msg = result.data
                // 获取消息容器
                const msgbox = document.getElementById('msgbox')
                // 清空消息容器，避免重复显示
                msgbox.innerHTML = ''
                // 遍历每条留言数据，将其插入进消息容器
                msg.forEach(msg => {
                    const div = document.createElement('div')
                    div.className = 'msg'
                    // 在展示用户名和留言信息的基础上，增加点赞数量的展示
                    div.innerHTML = `${msg.username}: ${msg.messages}(点赞数:${msg.favourite})`
                    msgbox.appendChild(div)
                })
            } catch (err) {
                console.log(err)
            }
        }
        window.onload = onLoad


        // 添加'鼠标点击'监听事件，获取被点击的元素
        document.addEventListener('click', (event) => {
            const clickedElement = event.target
            if (clickedElement.className === 'msg' || clickedElement.className === 'msg-content') {
                const msgElement = clickedElement.closest('.msg')
                const str = msgElement.textContent.split(':')

                const msg_author = document.getElementById('msg_author')
                const msg_content = document.getElementById('msg_message')

                msg_author.innerHTML = str[0].trim()
                const str2 = str[1].split('(')
                msg_content.innerHTML = str2[0].trim()
            }
        })

        //获取点赞功能按钮
        const deleteBtn = document.getElementById('favourite');
        deleteBtn.addEventListener('click', async () => {
            const author = document.getElementById('msg_author').textContent;
            const data = { username: author };
            console.log(data)
            try {
                const response = await fetch(`http://${IP}:5362/favourite`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });

                if (!response.ok) {
                    const error = await response.json();
                    alert(error.message);
                    return;
                }

                const result = await response.json();
                alert(result.message);
            } catch (err) {
                console.log('Error:', err);
                alert(err.message);
            }
            await location.reload()

        });


    </script>

</body>

</html>